<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring3-3.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
    <body>   
        <span th:id="${lopHocId}" class="lopHocId_span"></span>
        <table id="subtable" class="table_hocsinh" style="word-wrap: break-word;">
            <thead>
                <tr>                        
                    <th>Mã Học Sinh</th>
                    <th>Họ Tên</th>
                    <th>Ngày Sinh</th>
                    <th>Giới Tính</th>                        
                    <th>Địa Chỉ</th>
                    <th>Ngày Nhập Học</th>
                    <th>Ngày Nghỉ Học</th>                    
                    <th>Tác Vụ</th>                    
                </tr>
            </thead>
            <tbody>
                <tr th:id="${hocsinh.getid()}" align="center" th:each="hocsinh: ${listHocSinh}">                        
                    <td th:text="${hocsinh.getmaHocSinh()}" id="maHocSinh"/>
                    <td th:text="${hocsinh.gethoTen()}" id="hoTen"/>                        
                    <td th:text="${#dates.format(hocsinh.getngaySinh(),'dd/MM/yyyy')}" th:if="${hocsinh.getngaySinh()}" id="ngaySinh"/>
                    <td th:unless="${hocsinh.getngaySinh()}" id="ngaySinh"/>   
                    <td th:text="${hocsinh.getgioiTinh()}==1?${'Nam'}:${'Nữ'}" id="gioiTinh"/>                        
                    <td th:text="${hocsinh.getdiaChi()}" id="diaChi"/>
                    <td th:text="${#dates.format(hocsinh.getngayNhapHoc(),'dd/MM/yyyy')}"   th:if="${hocsinh.getngayNhapHoc()}" id="ngayNhapHoc"/>
                    <td th:unless="${hocsinh.getngayNhapHoc()}" id="ngayNhapHoc"/>   
                    <td th:text="${#dates.format(hocsinh.getngayNghiHoc(),'dd/MM/yyyy')}"  th:if="${hocsinh.getngayNghiHoc()}" id="ngayNghiHoc"/>                        
                    <td th:unless="${hocsinh.getngayNghiHoc()}" id="ngayNghiHoc"/>                                                     
                    <td th:unless="${hocsinh.maLopHoc}">
                        <div class="btn-group">
                            <a th:href="@{'/staff/management/students/edit/'+${hocsinh.getmaHocSinh()}}" title="SỬa" class="margin_action"><i class="glyphicon glyphicon-pencil"></i></a>     
                            <a title="Xếp Lớp" class="linkXepLop margin_action" th:id="${hocsinh.getid()}" data-toggle="modal" href="#xepLopMotHocSinhModal"><i class="glyphicon glyphicon-plus"></i></a>
                        </div>                            
                    </td>
                    <td th:if="${hocsinh.maLopHoc}">
                        <div class="btn-group">
                            <a th:href="@{'/staff/management/students/edit/'+${hocsinh.getmaHocSinh()}}" title="SỬa" class="margin_action"><i class="glyphicon glyphicon-pencil"></i></a>

                        </div> 
                    </td>
                </tr>
            </tbody>
        </table>   
        <div class="modal fade" id="xepLopMotHocSinhModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                  <h4 class="modal-title" id="myModalLabel">Xếp Lớp Học Sinh</h4>
                </div>
                <div class="modal-body">
                    <label class="select_label">Chọn Lớp Để Xếp</label>
                    <select id="IDLopHocXepLop" name="IDLopHocXepLop" class="input-xlarge custom_checkbox">
                        <option th:each="lopHoc : ${listLopHoc}" th:text="${lopHoc.gettenLopHoc()}" th:value="${lopHoc.getid()}" class="lopHocModal"/>                                                  
                    </select> 
                </div>
                <div class="modal-footer align_center">
                  <button type="button" class="btn btn-primary min_width_button_modal" id="xepLopButton">Yes</button>
                  <button type="button" class="btn btn-default min_width_button_modal" data-dismiss="modal">No</button>
                </div>
              </div>
            </div> 
        </div> 
        <script th:inline="javascript">
            /*<![CDATA[*/
            jQuery(document).ready(function() {
                jQuery("#subtable").dataTable({"bJQueryUI": true});
                COMMON.activeMenu("quanly_nav");
            }); 
            var studentId;
            $(".linkXepLop").on('click', function(){                
                studentId = $(this)[0].id;                
            })
            var xepLopMotHocSinh_url = /*[[@{/staff/management/students/xeplop_hocsinh/}]]*/ "demo";                        
            var index_url = /*[[@{/staff/management/students/index/}]]*/"demo";
            $("#xepLopButton").on('click', function(e){                
                var lopHocId = $("#IDLopHocXepLop")[0].value;                                
                $.ajax({
                    url: xepLopMotHocSinh_url,
                    type: 'GET',
                    data: {lopHocId: lopHocId, hocSinhId: studentId},
                    success: function(){
                        document.location = index_url;
                    }
                })
                $('#xepLopMotHocSinhModal').modal('hide');
                
            })
//            var lopHocId =$("#IDLopHoc")[0].value;            
//            if (lopHocId != "0") {                    
//                    var listLink = $(".linkXepLop");                    
//                    for (i = 0; i < listLink.length; i++) {                        
//                        listLink[i].style.display = "none";
//                    }
//                };
            /*]]>*/
        </script>    
    </body>
</html>